<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
   *{
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    ul{
        width: 800px;
        border: 1px solid red;
        /*将ul设置为弹性元素*/
        display: flex;
/*
         flex-direction: column;柱形的排列
           flex-direction: row; 行排列(从左到右)
             flex-direction: row-reverse; 反向的水平排列(从右到左)
          主轴：元素的排列方向
          侧轴:与主轴垂直的排列方向   
 
*/
        flex-direction: row;
    }

    li{
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
         /*子元素的伸展效果
           flex-grow: 1;表示父元素还有空余的位置，子元素就会占用完。
             flex-grow: 0;表示子元素不会占用多余空间(默认)
           (！！父元素的剩余空间可以给元素分取比例！)

        */
        /* flex-grow: 1; */


        /* flex-shrink: ; 元素的收缩系数
            元素的空间不足以容纳子元素时，可以对子元素进行收缩
        
        
        */
    }
    li:nth-child(1){
        background-color: royalblue;
        flex-grow: 1;/*占用的比例为(1/(1+2+3))*/
    }
    li:nth-child(2){
        background-color:red;
        flex-grow: 2;/*占用的比例为(2/(1+2+3))*/
    }
    li:nth-child(3){
        background-color: blueviolet;
        flex-grow: 3;/*占用的比例为(3/(1+2+3))*/
    }

</style>
<body>
    <!--flex(弹性盒:伸缩盒子)：
          -css的布局手段，主要用来代替浮动，用来布局！！
          -因为浮动有很多问题！，就是为了解决浮动而来解决的问题
           display:flex:块级别的弹性容器
           display:inline-flex：行类的弹性容器
            
           弹性元素的(直接子元素)称为弹性元素!!,如果有其他的杂质元素不算是，不管后代元素！
    -->
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        
      </ul>
</body>
</html>